<!-- pages/post/create.vue -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '发布帖子',
    navigationBarBackgroundColor: '#2563eb',
    navigationBarTextStyle: 'white'
  }
}
</route>

<template>
  <view class="page">
    <form @submit="onSubmit">
      <view class="form-item">
        <text class="label">标题</text>
        <input v-model="form.title" class="input" placeholder="请输入标题" />
      </view>

      <view class="form-item">
        <text class="label">类型</text>
        <picker mode="selector" :range="typeOptions" @change="onTypeChange">
          <view class="picker">{{ typeOptions[form.typeIndex] }}</view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">内容</text>
        <textarea v-model="form.content" class="textarea" placeholder="请输入内容" />
      </view>

      <view class="form-item" v-if="form.type === 'secondhand'">
        <text class="label">价格（元）</text>
        <input v-model="form.price" class="input" type="digit" placeholder="请输入价格" />
      </view>

      <view class="form-item" v-if="form.type === 'parttime'">
        <text class="label">薪资</text>
        <input v-model="form.wage" class="input" placeholder="如：15元/小时" />
      </view>

      <view class="form-item">
        <text class="label">位置</text>
        <input v-model="form.location" class="input" placeholder="可选，如：东门食堂" />
      </view>

      <!-- 图片上传（可选） -->
      <view class="form-item">
        <text class="label">封面图片</text>
        <view class="upload">
          <image v-if="form.cover" :src="form.cover" class="cover-preview" mode="aspectFill" />
          <view v-else class="upload-btn" @click="chooseImage">+ 添加图片</view>
        </view>
      </view>

      <button class="submit-btn" form-type="submit">发布</button>
    </form>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const typeOptions = ['二手', '兼职', '交友']
const typeMap = ['secondhand', 'parttime', 'friendship'] as const

const form = ref({
  title: '',
  content: '',
  typeIndex: 0,
  location: '',
  price: '',
  wage: '',
  cover: ''
})

// 计算当前类型
const type = computed(() => typeMap[form.value.typeIndex])

function onTypeChange(e: any) {
  form.value.typeIndex = Number(e.detail.value)
}

function chooseImage() {
  uni.chooseMedia({
    count: 1,
    mediaType: ['image'],
    success: (res) => {
      // 这里可以上传到服务器，或使用本地临时路径（仅演示）
      form.value.cover = res.tempFiles[0].tempFilePath
    }
  })
}

function onSubmit() {
  const data = {
    id: Date.now().toString(),
    title: form.value.title.trim(),
    content: form.value.content.trim(),
    type: type.value,
    location: form.value.location,
    price: form.value.price ? Number(form.value.price) : undefined,
    wage: form.value.wage || '',
    cover: form.value.cover,
    uptim: Date.now()
  }

  if (!data.title || !data.content) {
    uni.showToast({ icon: 'none', title: '请填写标题和内容' })
    return
  }

  // 模拟添加到列表（实际应通知 list 页面刷新）
  const list = uni.getStorageSync('mock_post_list') || []
  uni.setStorageSync('mock_post_list', [data, ...list])

  uni.showToast({ title: '发布成功' })
  setTimeout(() => {
    uni.navigateBack()
    // 可选：触发 list 页面刷新
    const pages = getCurrentPages()
    const prevPage = pages[pages.length - 2]
    if (prevPage && (prevPage as any).$vm?.onRefresh) {
      ;(prevPage as any).$vm.onRefresh()
    }
  }, 1000)
}
</script>

<style scoped lang="scss">
.page {
  padding: 12px;
  background: #f7f8fa;
  min-height: 100vh;
}

.form-item {
  background: #fff;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.label {
  display: block;
  font-size: 14px;
  color: #111827;
  margin-bottom: 8px;
  font-weight: 500;
}

.input, .textarea, .picker {
  width: 100%;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #f9fafb;
}

.textarea {
  height: 100px;
  vertical-align: top;
}

.picker {
  color: #374151;
}

.upload {
  margin-top: 4px;
}

.cover-preview {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}

.upload-btn {
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #6b7280;
}

.submit-btn {
  margin-top: 20px;
  background: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
  padding: 12px 0;
}
</style>